<head>
    <meta charset="UTF-8">
    <title>TodoList</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .myhead {
            background-color: #0b87ff;
            text-align: center;
            padding: 5px 0px 10px 0px;
            color: aliceblue;
        }

        .myhead .box {
            margin-top: 10px;
            display: flex;
            gap: 5px;
            justify-content: center;
        }

        .thing {
            width: 300px;
            height: 30px;
            padding: 0 10px;
            border-radius: 3px;
            outline: none;
            border: solid 1px white;
        }

        .add {
            display: inline-block;
            width: 80px;
            height: 30px;
            background-color: #eee;
            color: #0b87ff;
            line-height: 30px;
            border: none;
            border-radius: 3px;
        }

        .add:hover {
            cursor: pointer;
            background-color: #fff;
            color: #ff6700;
        }

        ul li {
            list-style: none;
            position: relative;
            padding-left: 40px;
            height: 40px;
            line-height: 40px;
        }

        /* 将所有奇数列表项设置为不同的颜色（斑马线）*/
        ul li:nth-child(odd) {
            background-color: #f9f9f9;
        }

        /* 光标移入的时候背景变暗 */
        ul li:hover {
            cursor: pointer;
            background-color: #dddddd;
        }

        /* 单击时，添加背景色并删除文本 */
        ul li.check {
            background-color: #888888;
            text-decoration: line-through;
            color: #f9f9f9;
        }

        /* 单击时添加“已选中”标记 */
        ul li.check::before {
            content: '';
            position: absolute;
            border-color: #fff;
            border-style: solid;
            border-width: 0 2px 2px 0;
            top: 10px;
            left: 16px;

            transform: rotate(45deg);
            height: 15px;
            width: 7px;
        }

        /* 设置关闭按钮的样式 */
        .close {
            position: absolute;
            right: 0px;
            top: 0px;
            padding: 0px 20px;
            font-size: 16px;
        }

        .close:hover {
            background-color: #f44336;
            color: white;
        }
    </style>

</head>

<body>
    <!-- 头部 -->
    <div class="myhead">
        <h2>My ToDo List</h2>
        <div class="box">
            <input type="text" placeholder="请输入待办事项..." class="thing">
            <button class="add">添加</button>
        </div>
    </div>

    <!-- 待办事项部分，内容动态生成 -->
    <ul>
	</ul>

</body>

<script>
    /*
        基本功能思路
            1,需要保存两个数据:代办事项内容 和 代办事项的选中状态(true和false)
            2,可以在localStorage中,将代办事项内容作为key,将选中状态作为value
            3,为了查看效果,可以在localStorage中添加假数据,将来获取出来在页面显示

        步骤
            一,编写一个方法displayTasks,用于在页面加载完成之后,展示localStorage中的数据
                //前三步:数据驱动视图
                    1.获取本地存储中的所有键的数组(Object.keys(localStorage))
                    2,遍历数组,拿到里面的所有元素(key:代办事项的内容).填充到li中
                    3,根据key获取value(选中状态),重新设置li的选中状态
                //后面:视图的改变影响数据
                    4.在li的点击事件中,根据li的选中状态,重新设置localStorage中key对应的value值
                    5.在li的删除事件中,删除localStorage中key对应的键值对

            二,实现添加的逻辑
                可以直接操作本地存储localStorage中的数据,来实现数据的改变影响视图(数据驱动视图)
                    1,直接将input中的数据保存到localStorage
                    2,重新调用一下displayTasks方法(类似重新渲染页面)
                    3,还需要在displayTasks方法的最前面,渲染数据之前对ul中的数据做一次清空

    */

    //获取相关的dom元素
    var addBtn = document.querySelector('.add')
    var input = document.querySelector('input')
    var ul = document.querySelector('ul')

    //编写一个方法displayTasks,用于在页面加载完成之后,展示localStorage中的数据
    function displayTasks(){
        //渲染之前,对ul中的数据做一次清空
        ul.innerHTML = ''

        //获取本地所有的键的数组
        var keyArr = Object.keys(localStorage)
        console.log(keyArr)//['aaa', 'bbb']

        //遍历数组,拿到里面的所有元素(key:代办事项的内容).填充到li中
        keyArr.forEach(function(key){
             //创建li元素,将文本框的内容填充进去
            var li = document.createElement('li')
            li.innerHTML = key

            //根据key获取value(选中状态),重新设置li的选中状态
            var value = localStorage.getItem(key)
            console.log('value的类型:',typeof(value))
            if(value == 'true'){
                li.classList.add('check')
            }

            //给li添加点击事件,点击的时候切换样式
            li.addEventListener('click',function(){
                this.classList.toggle('check')

                //在li的点击事件中,根据li的选中状态,重新设置localStorage中key对应的value值
                if(this.classList.contains('check')){
                    localStorage.setItem(key,true)
                }else{
                    localStorage.setItem(key,false)
                }

            })

            //给li添加删除按钮(创建span标签,绑定删除事件,添加到li中)
            var span = document.createElement('span')
            span.innerHTML = 'x'
            span.classList.add('close')
            span.addEventListener('click',function(e){
                //阻止事件冒泡(点击删除按钮的时候,会传播到父类li元素,会触发li元素的click事件)
                e.stopPropagation()

                //先通过span找到它所在的li元素
                var son = span.parentNode
                //再通过span找到它所在的li元素的父类ul
                var father = span.parentNode.parentNode
                //调用删除方法
                father.removeChild(son)

                //在li的删除事件中,删除localStorage中key对应的键值对
                localStorage.removeItem(key)
            })
            li.appendChild(span)

            //将li元素添加到ul下
            ul.appendChild(li)
        })
    }

    displayTasks()

   //监听按钮的点击事件
   addBtn.addEventListener('click',function(){
        //获取文本框中的内容
        var value = input.value 

        //直接将input中的数据保存到localStorage
        localStorage.setItem(value,false)

        //重新调用一下displayTasks方法(类似重新渲染页面)
        displayTasks()

        //点击之后,清空input内容
        input.value = ''
   })
</script>

</html>